<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM对象</title>
	</head>
	<body>
		<div style="width: 600px;height: 500px; background-color: aquamarine;">
			
			<p>xiao米</p>
			<h1>华为</h1>
		</div>
		<ul>
			<li id="menu" >小米</li>
			<li>华为</li>
			<li>苹果</li>
		</ul> 
		<div id="aa">
			<p>蒹葭</p>
		</div>
	</body>
	<script>
		
		//DOM:文档对象模型(操作元素时，把每一个元素节点看成一个对象，)
		/*DOM对象的继承
		1.父元素能给子元素
		
		*/
	   //DOM树
	   /*
	                 文档（document）
					   |
					元素节点（根节点HTML）
					   |
					元素（head）/元素（body）
	   
	   */
	  //选择器：标签选择器，类选择器（.），id选择器（#）
	  //querySelector():获取的第一个元素
	  let list=document.querySelector('p');//id加#，class加.
	  console.log(list);
	//获取字体颜色  
	list.style.color='pink';
	//获取所有的元素
	let list1=document.querySelectorAll('div');
	console.log(list1);
	console.log('-----------');
	//像遍历数组一样遍历list1
	//通过遍历伪数组list1能获取指定位置元素。
	
	let s;
	for(let i=0;i<list1.length;i++){
		s=list1[i];
	}
	console.log(s);
	//修改字体颜色
	s.style.color='green';
	console.log('-----------');
	//获取子元素
	let son=document.querySelector('#aa p');
	console.log(son);
	//根据标签名获取元素
	let a=document.getElementsByTagName('li');
	console.log(a);
	console.log('-----------');
	//根据id属性获取元素
	let b=document.getElementById('menu');
	console.log(b);
	console.log('-----------');
	
	
	</script>
</html>
